<template>
  <div class="good-detail app-wrapper">
    <swiper :options="swiperOption">
　　    <swiper-slide v-for="(item, index) in imgLists" :key="index"><img :src="item" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper> 
    <div class="jumbotron jumbotron-goodinfo">
      <h3 class="jumbotron-title">作品名称: {{good.name}}</h3>
      <p class="jumbotron-secondary">作品8寸横幅</p>  
      <div class="price"><span class="price-current">￥{{good.price}}</span>&nbsp;<span class="line-through">￥{{good.price}}</span></div>
      <button class="button button-follow">关注</button>
    </div> 

    <div class="detail-panel panel goods-wrapper">
      <div class="detail-panel-header">
        <h4 class="detail-panel-title">商品详情</h4>
      </div>
      <div class="detail-panel-body clearfix">
          <div class="goods-item media" 
            v-for="item in goodsList"
            :key="item.id"
          >
            <div class="media-object"><img :src="item.url" alt=""></div>
            <h4 class="media-heading">{{item.name}}</h4>
            <div class="media-desc text-right clearfix">
              <span class="red pull-left">￥{{item.price}}</span>
              <span class="origin">￥{{item.origin}}</span>
            </div>
          </div>
      </div>
    </div>
    <!-- /detail-panel -->

    <router-link to="/goodscar" class="goods-car-icon">
      <i class="icon icon-cart-gray"></i>
      <span class="badge">1</span>
    </router-link>

    <router-link to="/live" class="backlive-button"><i class="icon icon-home"></i> 返回直播</router-link>

    <div class="goods-action-bar clearfix">
      <div class="goods-action-list pull-left">
        <div class="goods-action-icon">
          <i class="icon icon-shop"></i>
          <p>店铺</p>
        </div>
        <div class="goods-action-icon active">
          <i class="icon icon-follow"></i>
          <p>关注</p>
        </div>
      </div>
      <div class="button-groups pull-right">
        <button type="button" class="button">加入购入车</button><button type="button" class="button">立即购买</button>
      </div>
    </div>
  </div>
</template>

<script>
let imgUrl = require('./img/goods_1.png');
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {},
  data() {
    return {
      good:{
        name: '《乡间小河-江西婺源》',
        price: 3000.00,
        origin: 7000.00
      },
      goodsList: [
        {id: 1, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 2, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 3, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 4, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 5, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
        {id: 6, name: '作品名称：《野马》', origin: '7000.00', price: '3000.00', url: imgUrl},
      ],
      imgLists: [
        require('./img/good_detail_1.png'),
        require('./img/good_detail_2.png')
      ], 
      swiperOption: {
          pagination: {
      　　　　el: '.swiper-pagination'
      　　}
      }
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
$red: #e24241;

.swiper-slide { height: 600px; }
.jumbotron {
  box-sizing: content-box;
  padding: 10px 35px;
  background: #fff;
  position: relative;
  line-height: 2;

  .jumbotron-title {
    font-size: 32px;
    color: #2a2a2a;
  }

  .jumbotron-secondary { 
    font-size: 24px;
    color: $red;
  }
  .price{
    font-size: 24px;
    color: #666;
  }
  .price-current {
    font-size: 28px;
    color: $red;
  }


  .button-follow {
    position: absolute;
    right: 35px;
    bottom: 35px;
    height: 56px;
    padding: 0 40px;
    font-size: 26px;
    color: #fff;
    line-height: 56px;
    background-color: $red;
    border-radius: 28px;
  }
}


.goods-wrapper {
  padding: 20px 35px 0;
  margin-top: 14px;
  background: #fff;

  .detail-panel-header {
    padding-left: 20px;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 6px;
      height: 26px;
      background-color: $red;
    }
  }
  .detail-panel-title {
    font-size: 28px;
    color: #2a2a2a;
  }
}

.detail-panel-body {
  padding-top: 40px;
}

.goods-action-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 12px 35px;
  font-size: 0;
  background: #fff;

  .goods-action-list {
    display: flex;
  }
  .goods-action-icon{
    width: 100px;
    text-align: center;
    color: #666;

    &.active { color: $red; }
    .icon {
      font-size: 42px;
    }

    p {
      font-size: 24px;
      line-height: 48px;
    }
  }

  .button-groups{
    width: 420px;
    border-radius: 40px;
    overflow: hidden;
  }
  .button{
    width: 50%;
    height: 80px;
    font-size: 32px;
    color: #fff;
    line-height: 80px;
    &:nth-of-type(1){ background-color: #fcba2e;}
    &:nth-of-type(2){ background-color: $red;}
  }
}

.goods-car-icon {
  width: 84px;
  height: 84px;
  position: fixed;
  left: 16px;
  bottom: 134px;
  border-radius: 100%;
  font-size: 48px;
  color: #666;
  text-align: center;
  line-height: 84px;
  background: #fff;
  box-shadow: -5px 4px 8px rgba(67,29,0, .2);

  .icon { vertical-align: middle; }
  .badge{
    width: 32px;
    height: 32px;
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background-color: $red;
    border-radius: 100%;
  }  
}

.backlive-button {
  height: 54px;
  padding: 0 20px;
  font-size: 24px;
  color: #fff;
  line-height: 54px;
  background-color: $red;
  border-radius: 27px;
  position: fixed;
  right: 0;
  bottom: 168px;
  .icon {
    font-size: 32px;
    vertical-align: middle;
  }
}
</style>